<template>
    <el-dialog
        ref="elDialogDom"
        v-model="_centerDialogVisible"
        :width="renderVideo?'50%' : '100%'"
        :modal-class="renderVideo ?'xme-dialog-modal' : 'xme-dialog-modal-img'"
        align-center
        class="dialog-wrap vsp-dialog-wrap vsp-dialog-wrap-simail"
        :class="[{'vsp-dialog-wrap-fullscreen': isFullscreen}, {'vsp-dialog-wrap-fullscreen-img': !renderVideo}]"
        :close-on-press-escape="false"
        :show-close="true"
        :fullscreen="isFullscreen"
    >
        <div class="step-body">
            <h1 class="title"> {{ $t('Preview') }}</h1>
            <!-- 视频播放区域 -->
            <div class="video-wrap" v-if="renderVideo">
                  <!-- 自定义视频播放器组件 -->
                <videoPlayer
                    ref="videoDom"
                    class="video-player-wrap"
                    :video-src="props.videoUrl"
                    @timeupdateKonva="handleTimeUpdate"
                />

                <div class="out-contro-video">
                    <button class="vjs-fullscreen-control vjs-control vjs-button"
                            type="button" title="Fullscreen" aria-disabled="false"
                            @click="toggleFullscreen"
                    >
                        <SvgIcon v-if="!isFullscreen" icon-class="fullscreen-enter-3" />
                        <SvgIcon v-else icon-class="fullscreen-out" />
                    </button>
                </div>
           <!-- 图形绘制层 -->
                <div class="webrtc-stream-view-konva-graph-wrap">
                    <webrtcStreamKonva
                        v-if="_centerDialogVisible && videoSize.width"
                        class="webrtc-stream-view-konva-graph"
                        :stageWidthInPixels="videoSize.width"
                        :stageHeightInPixels="videoSize.height"
                        :piniaOfDrawingGraphs="konvaConfigList"
                    />
                </div>
            </div>
            <div v-else class="img-wrap">
                <swiper :pagination="
                        {
                            type: 'fraction',
                        }"
                        :navigation="true">
                    <swiper-slide v-for="(url, index) in imgList" :key="index">
                        <div class="img-box">
                            <img :src="url"/>
                        </div>
                    </swiper-slide>
                </swiper>
            </div>
        </div>
    </el-dialog>
</template>
<script lang="ts" setup>
import { Swiper, SwiperSlide } from 'swiper/vue'
import SwiperCore, { Navigation, Pagination } from 'swiper/core'

import 'swiper/css'
import 'swiper/css/pagination'
import 'swiper/css/navigation'
import 'swiper/css/virtual'


import webrtcStreamKonva from '@/components/webrtc-steam-konva.vue'
import videoPlayer from './video-player.vue'

SwiperCore.use([Navigation, Pagination])


import { i18n } from '@/vue-i18n'
import { useVModel } from '@/utils/use-v-model'

import type {
    T_GraphsConfigItem2,
} from '@/types/graphs-konva.ts'
import type {
    T_RectGraphResultItem
} from '@/pages/components/types'

import {
    findClosestItem,
    formatDataToKonvaConfig,
} from '@/utils'

interface T_Props {
    renderVideo: boolean;
    videoDialogVisible?: boolean;
    videoUrl: string;
    imgList?: Array<string>;
    playStartTime: number;
    konvaConfigVal?: T_GraphsConfigItem2[];
    cameraResults: T_RectGraphResultItem[];
}

const $t    = i18n.global.t

const props = defineProps<T_Props>()

const $emit = defineEmits(
    ['update:editDialogVisible']
)


const isFullscreen   = ref(false)
const elDialogDom    = ref()
const currentTime    = ref(0)
const videoDom       = ref()
const _centerDialogVisible = useVModel(props, $emit, 'videoDialogVisible')
const konvaConfigList      = ref<T_GraphsConfigItem2[]>([])


const videoSize = reactive<
    {width: number, height: number}
>({
    width: 0,
    height: 0,
})

// function onImageLoad(img: T_ImgItem) {
//     img.isLoading = false
// }

function handleTimeUpdate(options: {playTime: number, playerSize: {width: 0, height: 0}}) {
    const playTime        = options.playTime
    videoSize.width       = options.playerSize.width
    videoSize.height      = options.playerSize.height
    konvaConfigList.value = []
    currentTime.value     = new Date(playTime * 1000).getTime() + props.playStartTime

    const currentCameraResults = findClosestItem(props.cameraResults,  currentTime.value)
    if(currentCameraResults) {
        konvaConfigList.value      = formatDataToKonvaConfig(currentCameraResults.content)
    }
}
async function toggleFullscreen() {
    isFullscreen.value = !isFullscreen.value
    videoSize.width    = 0
    const size         = await videoDom.value.videoLoadedmetadata()
    if(videoSize) {
        videoSize.width  = size.width
        videoSize.height = size.height
    }
}

const isMounted = ref(false)
watch(_centerDialogVisible, (val) => {
    if(!val) {
        videoDom.value && videoDom.value.pauseVideo()
        isFullscreen.value = false
    }
})

onMounted(() => {
    isMounted.value = true
})

</script>
<style lang="scss">           
@use '@/assets/style/el-dialog-vsp-ui.scss';
  .dialog-footer button:first-child {
    margin-right: 10px;
  }
  img {
    max-width: 100%;
    max-height: 100%;
  }
  .xme-dialog-modal-img {
    background-color: rgba(0,0,0,.8);
  }
//   .img-loading {
//     font-size: 50px;
//     animation:  loadingImg 1.5s linear infinite; 
//   }
  .step-body {
    min-height: 450px;
    max-height: 600px;
    height: 650px;
    .img-wrap {
        height: 88%;
        text-align: center;
        .swiper {
            height: 100%;
        }
    }
    .img-box {
        display: flex;
        align-items: center;
        justify-content: center;
        height: 100%;
    }
    .video-wrap {
        display: flex;
        flex: 1 1 0%;
        overflow: hidden;
        position: relative;
        height: 0;
        .video-player-wrap {
            flex: 1;
            position: relative;
            z-index: 0;
            left: 0;
            top: 0;
            // width: 100%;
            height: calc(100% - 50px);
            padding-top: 0;
        }
        .out-contro-video {
            position: absolute;
            top: calc(100% - 50px);
            right: 0;
            display: flex;
            align-items: center;
            justify-content: flex-end;
            width: 50px;
            height: 30px;
            button {
                background: none;
                border: none;
                color: inherit;
                display: inline-block;
                font-size: inherit;
                line-height: inherit;
                text-transform: none;
                text-decoration: none;
                transition: none;
            }
            .vjs-fullscreen-control {
                display: flex;
                justify-content: center;
                align-items: center;
                position: relative;
                margin: 0;
                padding: 0;
                height: 100%;
                width: 40px;
                cursor: pointer;
                color: #fff;
                .svg-icon {
                    width: 1.1em;
                    height: 1.1em;
                }
                &:focus {
                    .svg-icon {
                        filter: drop-shadow(0px 0px 5px rgba(255, 255, 255, 1));
                    }
                }
            }
        }
        .webrtc-stream-view-konva-graph-wrap {
            position: absolute;
            z-index: 99;
            left: 0;
            top: 0;
            width: 100%;
            height: calc(100% - 50px);
            .webrtc-stream-view-konva-graph {
                position: absolute;
                left: 50%;
                top: 50%;
                transform: translate(-50%, -50%);
            }
        }
    }
  }
  .vsp-dialog-wrap {
    display: flex;
    flex-direction: column;
    .el-dialog__header {
        flex: 0;
    }
    .el-dialog__body {
        flex: 1;
        height: 100%;
    }
  }
  .vsp-dialog-wrap.vsp-dialog-wrap-fullscreen {
    .step-body {
        max-height: none;
        height: 100%;
    }
  }
  .vsp-dialog-wrap.vsp-dialog-wrap-fullscreen-img {
        height: 90%;
        overflow: hidden;
        border: 0;
        background-color: transparent;
        .step-body {
            max-height: none;
            height: 100%;
        }
        .el-dialog__headerbtn {
            display: flex;
            align-items: center;
            justify-content: center;
            width: 28px;
            height: 28px;
            font-size: 20px;
            right: 25px;
        }
    }
// @keyframes loadingImg {
//     0%{
//         transform: rotate(0deg);
//     }
//     100%{
//         transform: rotate(360deg);
//     }
// }
</style>